<template>
  <view class="get-phone-popup" v-if="show">
    <view class="mask" @tap="handleClose"></view>
    <view class="popup-content">
      <view class="popup-title">授权提示</view>
      <view class="popup-desc">为了给您提供更好的服务，需要获取您的手机号</view>
      <view class="btn-group">
        <button class="cancel-btn" @tap="handleReject">取消</button>
        <button class="confirm-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确认授权</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getUserPhone } from '@/api/store';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['update:show', 'success', 'reject']);

// 获取手机号
const getPhoneNumber = async (e: any) => {
  if (e.detail.code) {
    try {
      const res = await getUserPhone({ code: e.detail.code, openid: userStore.userInfo.user.weixinOpenId });
      if (res.code === 200 && res.data.phoneNumber) {
        // 存储手机号
        uni.setStorageSync('userPhone', res.data.phoneNumber);
        uni.setStorageSync('token', res.data.token);
        // 通知父组件获取成功
        emit('success', res.data.phoneNumber);
        // 关闭弹窗
        handleClose();
      }
    } catch (error) {
      console.error('获取手机号失败:', error);
      uni.showToast({
        title: '获取手机号失败',
        icon: 'none',
      });
      // 获取失败也返回上一页
      handleReject();
    }
  } else {
    // 用户拒绝授权
    handleReject();
  }
};

// 处理拒绝授权
const handleReject = () => {
  emit('reject');
  handleClose();
  // 显示提示
  uni.showToast({
    title: '需要授权手机号才能继续操作',
    icon: 'none',
    duration: 2000,
    complete: () => {},
  });
};

// 关闭弹窗
const handleClose = () => {
  emit('update:show', false);
};
</script>

<style lang="scss" scoped>
.get-phone-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .popup-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600rpx;
    background: #fff;
    border-radius: 24rpx;
    padding: 40rpx;
    box-sizing: border-box;

    .popup-title {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
      text-align: center;
      margin-bottom: 30rpx;
    }

    .popup-desc {
      font-size: 28rpx;
      color: #666;
      text-align: center;
      margin-bottom: 40rpx;
    }

    .btn-group {
      display: flex;
      justify-content: space-between;
      gap: 20rpx;

      button {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 40rpx;
        font-size: 28rpx;

        &.cancel-btn {
          background: #f5f5f5;
          color: #666;
        }

        &.confirm-btn {
          background: linear-gradient(138deg, #3b56ed, #7394f2);
          color: #fff;
        }
      }
    }
  }
}
</style>
